import TauActionPanel from '@/components/TauActionPanel';
import TauPage from '@/components/TauPage';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { Button, Drawer, Rating } from '@alifd/next';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import React, { useState, useEffect } from 'react';
import DataForm from './components/DataForm';
import { column, ENUMS, toSelectDataSource } from './stores/definitions';
import { toJS } from 'mobx';

const tableId = uniqueId('tauTable-');

function transStar(num) {
  const source = [];
  for (let i = 1; i <= num; i++) {
    source.push({
      label: (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div>{i}</div>
          <Rating value={1} count={1} style={{ marginBottom: 3 }} />
        </div>
      ),
      value: i,
    });
  }
  return source;
}

const Evaluate = ({ queryParams }) => {
  const [modal, setModal] = useState({
    show: null,
    record: null,
  });
  const { evaluateStore: store, ruleStore } = useStore();

  useEffect(() => {
    store.search = {
      ...store.search,
      commentType: 'auxOrder',
      groupIds: [ruleStore._group_id],
    };
  }, [ruleStore._group_id]);

  // 获取列表数据
  const handleOnSearch = (params) => {
    const { getOnDate, ...searchArgs } = params.values;
    const [from, to] = getOnDate || [];
    store.search = {
      from,
      to,
      // 司机对司机
      commentType: 'auxOrder',
      groupIds: [ruleStore._group_id],
      scopes: ['cbv-driver-group'],
      ...queryParams,
      ...searchArgs,
    };
  };

  // 点击打开查看
  const handleOpenView = (result) => {
    setModal({ show: 'view', record: result });
  };

  // Modal窗口关闭回调
  const handleCancel = () => {
    setModal({ show: null, record: null });
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        searchItems={[
          {
            name: 'getOnDate',
            type: 'date-range',
            props: {
              placeholder: [t`评价开始时间`, t`评价结束时间`],
            },
          },
          {
            name: 'star',
            type: 'select',
            props: {
              dataSource: transStar(5),
            },
          },
        ]}
        keywordSearch={{
          // enabled: true,
          placeholder: t`请输入关键字搜索`,
        }}
        className="action-panel"
      />
      <div className="content">
        <TauTable
          instanceId={tableId}
          primaryKey="id"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          onFetch={(pg) => {
            store.pg = pg;
          }}
          loading={store.loading}
          dataSource={toJS(store.logs)}
          columns={[
            { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('reviewerName', { width: 100 }),
            column('commentedByName', { width: 100 }),
            column('star', { width: 120 }),
            column('content', { width: 100 }),
            column('commentDate', { width: 130 }),
            {
              title: t`操作`,
              dataIndex: 'evaluateNumber',
              width: 180,
              cell: (_, __, r) => (
                <>
                  <Button text type="primary" onClick={() => handleOpenView(r)}>{t`查看`}</Button>
                </>
              ),
            },
          ]}
        />
      </div>
      <Drawer
        visible={modal.show === 'view'}
        // eslint-disable-next-line no-nested-ternary
        title={t`查看司机【${modal.record?.reviewerName}】评价`}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal({ ...modal, toClose: `toClose$${Date.now()}` })}
        width="600px"
      >
        <DataForm id={modal.record?.id} modal={modal} onCancel={handleCancel} />
      </Drawer>
    </TauPage>
  );
};

export default observer(Evaluate);
